<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
		<link rel="stylesheet" href="../css/style-reset.css">
		<title>个人资料</title>

		<style>
			.top{
				background-color: #42455c;
				text-align: center;
				padding: 20px 0;
			}
			.avatar{
				width: 80px;
				height: 80px;
				margin: 0 auto;
				border: 3px solid #fff;
				border-radius: 50%;
				-webkit-border-radius: 50%;
			}
			.avatar img{
				width: 80px;
				height: 80px;
				border: none;
				border-radius: 50%;
				-webkit-border-radius: 50%;
				background-size: 100% 100%;
				font-size: 13px;
			 	color: #b4b4b4;
			 	line-height: 80px;
			}
			.person{
				margin-top: 10px;
				font-size: 14px;
				color: #fff;
				text-align: center;
			}
			/* ul */
			.content ul{
				margin-bottom: 10px;
				border-top: 1px solid #dcdcdc;
				border-bottom: 1px solid #dcdcdc;
				padding-left: 15px;
				background-color: #fff;
			}
			.content ul:first-child{
				border-top: none;
			}
			.content ul li{
				border-bottom: 1px solid #dcdcdc;
				padding: 10px 0;
				padding-right: 15px;
			}
			.content ul li:last-child{
				border-bottom: none;
			}
			.content ul li a{
				display: block;
				overflow: hidden;
			}
			.content .left{
				float: left;
				font-size: 14px;
				color: #42455c;
			}
			.content .right{
				float: right;
				display: inline-block;
				width: 11px;
				height: 16px;
				background-image: url(../images/icons/arrow_in.png);	
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}
			/* 保存修改 */
			.change-btn{
				position: fixed;
				bottom: 10px;
				left: 2.5%;
				right: 2.5%;
				display: block;
				width: 95%;
				height: 35px;
				margin: 0 auto;
				border: none;
				border-radius: 4px;
				-webkit-border-radius: 4px;
				background-color: #53ceca;
				font-size: 16px;
				font-weight: 600;
				color: #fff;
				text-align: center;
				line-height: 35px;
			}
		</style>
	</head>
	<body>
		<div class="content">
			<div class="top">
				<div class="avatar">
					<img src="images/1.jpg" alt="萌小兔">
				</div>
				<p class="person">萌小兔</p>
			</div>
			<ul>
				<li>
					<a href="">
						<span class="left">我的订单</span>
						<span class="right arrow"></span>
					</a>
				</li>
				<li>
					<a href="">
						<span class="left">我的课程</span>
						<span class="right arrow"></span>
					</a>
				</li>
			</ul>
			<ul>
				<li>
					<a href="">
						<span class="left">我的优惠券</span>
						<span class="right arrow"></span>
					</a>
				</li>
				<li>
					<a href="">
						<span class="left">测试结果</span>
						<span class="right arrow"></span>
					</a>
				</li>
			</ul>
			<button class="change-btn" type="button">保存修改</button>
		</div>
	</body>
</html>